﻿@{
    Layout = "_TabLayoutIndex";
    ViewBag.Title = "Index";
}
<div class="x-nav">
    <span class="layui-breadcrumb">
        <a href="">系统管理</a>
        <a href="">系统字典管理</a>
        <a><cite>系统字典</cite> </a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-row">
            <div class="layui-col-xs3" style="padding-right:8px;">
                <div class="layui-card">
                    <div class="layui-card-body" style="text-align:right;">
                        <div class="layui-col-space12" style="text-align:right;">
                            <div class="layui-btn-group">
                                <button type="button" class="layui-btn" id="btn_addItem"><i class="layui-icon layui-icon-add-1"></i>增加</button>
                                <button type="button" class="layui-btn" id="btn_editItem"><i class="layui-icon layui-icon-edit"></i>编辑</button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div id="tree"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs9">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-col-space12">
                            <div class="layui-inline layui-show-xs-block">
                                <input type="text" name="key" placeholder="名称/编号" autocomplete="off" class="layui-input searchVal">
                            </div>
                            <div class="layui-inline layui-show-xs-block">
                                <button class="layui-btn search_btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                            </div>
                        </div>
                    </div>
                    <hr />
                    @*<div class="layui-card-body">
                        <div class="layui-col-space12" style="text-align:right;">
                            <div class="layui-btn-group">
                                <button type="button" class="layui-btn"><i class="layui-icon layui-icon-add-1"></i>增加</button>
                                <button type="button" class="layui-btn"><i class="layui-icon layui-icon-edit"></i>编辑</button>
                                <button type="button" class="layui-btn"><i class="layui-icon layui-icon-delete"></i>删除</button>
                            </div>
                        </div>
                    </div>*@
                    <div class="layui-card-body">
                        <table id="table" class="layui-hide" lay-filter="test"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--操作-->
<script type="text/html" id="listBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
</script>
@section Scripts{
<script src="~/js/aju.Carefree.Layer.js"></script>
<script>
    layui.use(['tree', 'jquery', 'table'], function ()
    {
        var tree = layui.tree
            , layer = layui.layer
            , $ = layui.jquery
            , table = layui.table;
        var itemId;
        var data;
        $.ajax({
            url: "/Item/GetData",
            async: false,
            success: function (obj)
            {
                data = eval("(" + obj + ")");;
            }
        });
        //无连接线风格
        tree.render({
            elem: '#tree'
            , data: data
            , showLine: true//是否开启连接线
            , click: function (obj)
            {
                itemId = obj.data.id;
                if (obj.data.children == null) {
                    bindTable(obj.data.id)
                }
            }
        });
        function bindTable(id)
        {
            table.render({
                id: "list_itemDetails",
                elem: "#table",
                url: "/Item/GetSubData?id=" + id,
                loading: true,
                toolbar: 'default',
                height: "350px",
                title: "xxx",
                defaultToolbar: ['filter', 'print', 'exports'],
                cellMinWidth: 80,
                cols: [[
                    { type: 'checkbox', fixed: 'left' },
                    { field: 'Id', width: 80, title: 'ID', hide: true },
                    { field: 'ItemName', width: 130, title: '名称' },
                    { field: 'ItemCode', width: 130, title: '编号' },
                    { field: 'SortCode', width: 80, title: '排序', sort: true },
                    { field: 'CreatorTime', width: 160, title: '创建时间', sort: true },
                    { field: 'Description', title: '备注' }
                ]]
            });

        }

        //监听头工具栏事件
        table.on('toolbar(test)', function (obj)
        {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    layer.msg('添加');
                    break;
                case 'update':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else if (data.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：' + checkStatus.data[0].Id);
                    }
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        layer.msg('删除');
                    }
                    break;
            };
        });

        $(".search_btn").on("click", function ()
        {
            table.reload("list_itemDetails", {
                url: "/Item/GetSubData?id=" + itemId,
                where: {
                    key: $(".searchVal").val()  //搜索的关键字
                }
            });
        });
        $("#btn_addItem").on("click", function ()
        {
            modalOpen({
                id: 'From',
                title: '新增数据字典',
                width: '500px',
                height: '500px',
                url: "/Item/AddOrEditItem",
                callBack: function (iframeId, index)
                {
                    top.frames[iframeId].submit(index);
                }
            });
        });
        $("#btn_editItem").on("click", function ()
        {
            if (itemId != undefined) {
                modalOpen({
                    id: 'From',
                    title: '新增数据字典',
                    width: '500px',
                    height: '500px',
                    url: "/Item/AddOrEditItem?id=" + itemId,
                    callBack: function (iframeId, index)
                    {
                        top.frames[iframeId].submit(index);
                    }
                });
            }
        });
    });
</script>
}